import { ref } from 'vue';
import { ElInput, ElOption, ElSelect } from 'element-plus';
import { useForm } from '@/components/ProForm';

export interface IFormData {
  name: string;
  attrs: {
    age: number;
    sex: 1 | 2;
    phone: string;
  };
}

export const useFormConfig = () => {
  const options = [
    { value: 1, label: '男' },
    { value: 2, label: '女' },
    { value: 0, label: '保密' },
  ];
  // 表单数据
  const formData = ref<IFormData>({
    name: '奥德彪 v-focus-select 指令聚焦选中',
    attrs: {
      age: 20,
      sex: 1,
      phone: '18812341234',
    },
  });
  // 表单配置
  const { formConfig } = useForm<IFormData>(() => [
    {
      prop: 'name',
      label: '名称',
      render(row) {
        return <ElInput v-model={row.name} v-focus-select />;
      },
    },
    {
      prop: 'attrs.age',
      label: '年龄',
      required: true,
      isHidden: false,
      render(row) {
        return <ElInput v-model={row.attrs.age} v-focus />;
      },
    },
    {
      prop: 'attrs.phone',
      label: '手机',
      render(row) {
        return <ElInput v-model={row.attrs.phone} />;
      },
    },
    {
      prop: 'attrs.sex',
      label: '性别',
      required: true,
      renderLabel({ label }) {
        return label;
      },
      renderError({ error }) {
        return <span>必填{error}</span>;
      },
      render(row) {
        return (
          <ElSelect v-model={row.attrs.sex}>
            {options.map((v) => {
              return <ElOption key={v.value} label={v.label} value={v.value} />;
            })}
          </ElSelect>
        );
      },
    },
  ]);
  return {
    formData,
    formConfig,
  };
};
